<template>
  <div>
    <div class="top-bar">
      <div :class="{'bar-item': true, active: type === '1'}" @click="getTeacher">
        <span>教师列表</span>
        <span class="bottom-line"></span>
      </div>
      <div :class="{'bar-item': true, active: type === '2'}" @click="getStudent">
        <span>学生列表</span>
        <span class="bottom-line"></span>
      </div>
      <div class="message" style="width: 20px;">
        <router-link to="/index/message">
          <img src="../../../../assets/img/icon-message.png" alt="" width="20">
        </router-link>
      </div>
    </div>
    <div class="search">
      <van-search
        v-model="search"
        placeholder="请输入搜索关键词"
        show-action
        shape="round"
        @search="onSearch">
        <div slot="action" @click="onSearch">搜索</div>
      </van-search>
    </div>
    <div class="content">
      <div class="list-item" v-for="(item, index) in list" :key="index">
        <div class="title-tag">{{ title[index] }}</div>
        <div class="list">
          <router-link v-for="(e, i) in item" :key="i" :to="type === '1' ? '/teacher/detail' : '/student/detail'">
            <div class="user">
              <div class="avatar"><img src="../../../../assets/img/icon-avatar.png" alt="" width="50"></div>
              <div class="name">
                <span>{{ e.name }}</span>
                <span class="tag" v-if="e.platform">
                  <router-link to="/index/about">{{ e.platform }}</router-link>
                </span>
              </div>
            </div>
          </router-link>
        </div>
      </div>
    </div>
    <van-divider>{{ type === '1' ? '共66位教师 | 77个机构' : '共66位学生' }}</van-divider>
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      search: '',
      type: '1',
      list: [],
      title: ['A', 'B', 'C', 'D'],
      teacherList: [
        [{name: 'A老师', platform: '壹起学'}, {name: 'A老师2'}],
        [{name: 'B老师', platform: '罗兰数字'}, {name: 'A老师2', platform: '珠江钢琴艺术中心'}]
      ],
      studentList: [
        [{name: 'A学生'}, {name: 'A学生2'}],
        [{name: 'B学生'}, {name: 'B学生2'}]
      ]
    }
  },
  methods: {
    onSearch () {},

    getTeacher () {
      this.type = '1'
      this.list = this.teacherList
    },
    getStudent () {
      this.type = '2'
      this.list = this.studentList
    }
  },
  created () {
    this.list = this.teacherList
  }
}
</script>

<style scoped>
  .top-bar{
    font-family: PingFangBlod;
    color: #1E1E1E;
    display: flex;
    align-items: center;
    padding: 10px 16px;
    box-shadow:0px 3px 6px rgba(0,0,0,0.16);
    margin-bottom: 10px;
    font-size: 18px;
  }
  .top-bar .bar-item{
    flex-grow: 1;
    flex-shrink: 1;
    text-align: center;
    position: relative;
  }
  .top-bar .bar-item:nth-child(1){
    border-right: 1px solid #707070;
  }
  .top-bar .bar-item.active{
    color: #3A7FE2;
  }
  .bar-item.active .bottom-line{
    position: absolute;
    display: inline-block;
    height: 3px;
    width: 50px;
    background-color: #3a7fe2;
    bottom: -10px;
    left: 50%;
    margin-left: -25px;
  }
  .top-bar .message{
    flex-grow: 0;
    flex-shrink: 0;
  }
  .top-bar .message img{
    display: block;
  }

  .list-item .title-tag{
    background-color: #f2f2f2;
    padding: 10px 15px;
    font-size:12px;
    font-family:PingFang SC;
    font-weight:bold;
    color:rgba(102,102,102,1);
  }
  .user{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 58px;
  }
  .user .avatar{
    padding: 10px;
    height: 50px;
    flex-shrink: 0;
    flex-grow: 0;
  }
  .user .name{
    height: 100%;
    flex-shrink: 1;
    flex-grow: 1;
    border-bottom: 1px solid rgba(0,0,0,0.2);
    box-sizing: border-box;
    line-height: 57px;
    font-family: PingFangBlod;
    font-size: 18px;
    position: relative;
    color: #1A1D20;
  }
  .name .tag{
    position: absolute;
    top: 0;
    right: 15px;
    line-height: normal;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #fff;
    background: linear-gradient(#1F78EC, #1F8CEC, #24C1F2);
    padding: 4px 12px;
    border-radius: 0 0 8px 8px;
  }
  .tag a{
    color: #fff;
  }
</style>
